<template>
    <!-- 整个内容区域 -->
    <div class="content pb-5 bg-white">
        <!-- 筛选菜单 -->
        <div class="choose-menu h-[1rem] w-full flex text-[0.533rem] shadow-[0px_4px_8px_rgba(0,0,0,0.3)] py-[0.1rem] ">
            <!-- 推荐、最新、附近 -->
            <div class="menu flex-1 h-full  box-border px-2">推荐</div>
            <div class="menu flex-1 h-full  box-border px-2">最新</div>
            <div class="menu flex-1 h-full  box-border px-2">附近</div>
            <!-- 筛选按钮 -->
            <div class="choose flex-[0_0_30%] h-full  pl-[1.3rem] box-border">筛选</div>
        </div>

        <!-- 数据渲染区域 -->
        <div class="data mt-2 flex flex-col justify-center items-center">
            <!-- 单条数据 -->
            <div class="detail-data w-[9.1rem] h-[4.7rem] bg-white rounded-[0.267rem] mb-2 shadow-[0px_4px_8px_rgba(0,0,0,0.3)]"
                v-for="(item, index) in detailData" :key="index">
                <!-- 标题和薪资 -->
                <div class="titleandsalary flex justify-between text-[0.5rem] mt-[0.5rem]">
                    <div class="title ml-[0.8rem]">{{ item.title }}</div>
                    <div class="salary mr-[1rem] text-[rgb(233,157,66)]">{{ item.salary }}</div>
                </div>
                <!-- 地址 -->
                <div class="address text-[0.35rem] text-[rgb(79,79,79)] mt-[0.3rem] ml-[0.8rem]">{{ item.address }}
                </div>
                <!-- 标签 -->
                <div class="tag text-[0.35rem] mt-[0.3rem]">
                    <span
                        class="time ml-[0.8rem] mr-[0.5rem] bg-[rgb(218,218,218)] h-[0.8rem] px-[0.6rem] inline-block leading-[0.8rem] rounded-[0.267rem] ">{{
                            item.tag }}</span>
                    <span
                        class="sex bg-[rgb(218,218,218)] px-[0.6rem] inline-block leading-[0.8rem] rounded-[0.267rem] h-[0.8rem]">{{
                            item.sex }}老师</span>
                </div>
                <!-- 头像和用户名 -->
                <div class="avatatandusername flex items-center mt-[0.3rem]">
                    <div
                        class="avatar ml-[0.8rem] mr-[0.5rem] w-[1rem] h-[1rem] inline-block rounded-full overflow-hidden">
                        <img :src="item.avatar" class="w-full">
                    </div>
                    <div class="username">{{ item.username }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    detailData: []
})
</script>